<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title> JS 事件</title>
    <style>
        #list li{
            width: 400px;
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid #999;
        }
    </style>
</head>
<body>
    <h1> JS 事件</h1>
    <hr>

    <ul id="list">
        <li>小静静, 你宣我吗?  宣1</li>
        <li>小静静, 你宣我吗?  宣2</li>
        <li>小静静, 你宣我吗?  宣3</li>
        <li>小静静, 你宣我吗?  宣4</li>
        <li>小静静, 你宣我吗?  宣5</li>
    </ul>  

    <hr>    
    <button onclick="ck(this)" id="btn">窗前明月光,地上鞋两双!</button>


    <script>
        // 通过参数 把this传入到函数中 代表 当前的对象 不需要通过getElementById()等函数 获取
        function ck(obj){
            console.log(obj);
            alert(obj.innerHTML);
        }     
    
    

        var list = document.getElementById('list').getElementsByTagName('li');
        console.log(list);

        for(var i = 0;i<list.length;i++){
            list[i].onclick = function(){
                alert(this.innerHTML);  // this 在这里指的是 当前点击事件 不能用list[i]替代 this 因为 循环和事件不同步;
            }
        }



    </script>
    


</body>
</html>